<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/4
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
</head>
<body ontouchstart=""  class="w100 h100 of bcf">
<div class="detailTop pf w100 of">
    <div class="w100 of tc cf f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png" style="margin-top: 4px;height: 40px;width: 40px;"/></span>
		找回密码
    </div>
</div>

<div class="container db jz  db h100 h100 of pr mgt45">

	 <section class="forgotBlock w100 db" style="margin-top: 7%;">
	 	<div class="df cf jz mgt10 of">
	 			<img src="mb/images/forgot1.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				<input type="tel" name="tel" value="" placeholder="请输入手机号" required="required" id="mobile" class="w100"/>
	 			</div>
	 	</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/forgot2.png" class="db hauto">
	 			<div class="mgl10" style="width: width: 57.1%;">
	 				   <input type="text" name="pwd" value="" placeholder="请输入验证码" required="required" id="verificationCode" class="w100"/>
	 			</div>
	 			 <button id="verificationCodeGet" class="f15 cf tc fr mgl3 btnOrange" onclick="smsSend($('#mobile'))" style="margin-top:0;width:36%;">获取验证码</button>
	 		</div>
	 		
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/forgot3.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				<input type="password" name="pwd" value="" placeholder="请输入您的新密码" required="required" id="password"  class="w100"/>
	 			</div>
	 		</div>
	 		
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/forgot3.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				 <input type="password" name="pwd" value="" placeholder="请确认您的密码" required="required" id="password2"  class="w100"/>
	 			</div>
	 		</div>
	 		
	 		<div class="jz w92">
                <button type="button" id="findPwdBub" class="f17 cf tc w100 btnBlue br2"">提&nbsp;&nbsp;交</button>
            </div>
	 </section>
</div>

<script>

    var countdown = 60;
    function resetCode() {
        var btn = $('#verificationCodeGet');
        if (countdown == 0) {
            btn.removeAttribute("disabled");
            btn.value = "重新获取验证码";
            countdown = 60;
            return;
        } else {
            btn.attr("disabled", "disabled");
            btn.value = "请在" + countdown + "s内填写验证码";
            countdown--;
        }
        setTimeout(function () { resetCode(); } , 1000);
    }

    //发送验证码
    function smsSend(tel) {
        var pattern = /^1[0-9]{10}$/;

        var phone = tel.val();

        if (phone == '') {
            showToast("请输入手机号码!");
            isPhone = 0;
            return false;
        }
        if (!pattern.test(phone)) {
            showToast("请输入正确的手机号码!");
            isPhone = 0;
            return false;
        }

        $.ajax({
            url: "LoginServlet",
            data: JSON.stringify({m: 30, mobile: phone}),
            type: 'post',
            dataType: 'json',
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
                if (data.state == 1) {
                    showToast('验证码发送成功,请注意查收!');
                    resetCode(); //倒计时
                } else {
                    showToast(data.info);
                }
            },
            error: function () {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }


    $(function () {
        $('#findPwdBub').click(function () {
            var mobile = $.trim($('#mobile').val());
            var code = $.trim($('#verificationCode').val());
            var password = $.trim($('#password').val());
            var password2 = $.trim($('#password2').val());
            var pattern = /^1[0-9]{10}$/;

            if (mobile == "") {
                showToast("你还未填写手机号");
                return false;
            }
            if (code == '') {
                showToast("请输入验证码!")
                return false;
            }
            if (!pattern.test(mobile)) {
                showToast("请输入正确的手机号码!");
                isPhone = 0;
                return false;
            }
            if (password == "" || password2 == "") {
                showToast("请输入密码!");
                return false;
            }
            if (password != password2) {
                showToast("两次密码不一致!");
                return false;
            }

            $.ajax({
                url: "LoginServlet",
                data: JSON.stringify({m: 31, mobile: mobile, code: code, password: $.md5(password),codepassword:password}),
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    showProgressDg();
                },
                success: function (data) {
                    console.log(data);
                    if (data.state == 1) {
                        // 找回密码成功
                        window.location.href = 'mb/jsp/login.jsp';
                    } else {
                        showToast(data.info);
                    }
                },
                error: function (data) {
                    showToast(data.info);
                    return false;
                },
                complete: function () {
                    closeProgressDg();
                }
            });
        })

    })

</script>

</body>
</html>
